<script setup>

import {useRouter,useRoute} from "vue-router";
import { reactive, ref } from 'vue'
import {getRecord} from "@/api/medicine/record.js";
import {listManufacturer} from "@/api/medicine/manufacturer.js";
import {parseTime} from "../../../utils/ruoyi.js";
import {listMedicineinfo} from "@/api/medicine/medicineinfo.js";
import {listRecordinfo, shenhe} from "@/api/medicine/recordinfo.js";

const router = useRouter();
const route = useRoute();
const isOk=ref(false)

const storageInId=ref()
const storageInRecord=ref({})
const form=ref({})
const changjia=ref([])
// 全部药品信息
const medicineinfoList=ref()

//被选中要添加的药品信息
const medicineList=ref()

const reviewArr=ref([])
const { proxy } = getCurrentInstance();
const { medicine_our_record, medicine_status, medicine_ptype } = proxy.useDict('medicine_our_record', 'medicine_status', 'medicine_ptype');



const size = ref('large')
const labelPosition = ref('top')

const back=()=>{
  router.push('/medicine/record')
}

//点击确定增加显示的数据
const submitForm=()=>{


  reviewArr.value=medicineList.value

  medicineList.value=null
  isOk.value=false

}

//点击取消
const cancel=()=>{

  medicineList.value=null
  isOk.value=false
}
// 多选框选中数据
function handleSelectionChange(selection) {


  medicineList.value=selection
  // ids.value = selection.map(item => item.medicineId);
  // single.value = selection.length != 1;
  // multiple.value = !selection.length;

  console.log(selection)

}

//数字框
const handleChange = (value) => {
  console.log(value)
}

const query=ref({
  pageNum: 1,
  pageSize: 10,
  manufacturerName:null,
  storageInId: null,
  storageInType: null,
  reviewStatus: null,
})

//查询药品对象
const medicineQuery=ref({
  pageNum: 1,
  pageSize: 10,
  prescriptionName: null,
  medicineStatusId: null
})

//通用查询对象
const queryParams=ref({
  pageNum: 1,
  pageSize: 10000,
})
//查询显示入库详情药品的对象
const queryInParm=ref({
  pageNum: 1,
  pageSize: 10000,
  storageOutId:form.value.storageInId
})

//弹框中的搜索
function handleQuery() {
  medicineQuery.value.pageNum = 1;
  getList(medicineQuery.value);
}





// 表单重置
function reset() {
  form.value = {
    storageInId: null,
    storageInType: null,
    storageInDate: null,
    medicineAdmin: null,
    medicineAdminOrder: null,
    orderDate: null,
    reviewStatus: null,
    medicineAdminReview: null,
    reviewDate: null,
    remarks: null,
    buyMoney: null,
    sellMoney: null,
    manufacturerId: null,
    ext4: null,
    ext5: null
  };
  proxy.resetForm("recordRef");
}

//删除显示的记录
function handleDelete(id){
  reviewArr.value.splice(id,1);
}

//添加药品记录
function tianjia(){


  medicineList.value=null

  isOk.value = true

}


//获取所有药品信息
function getList(){
  listMedicineinfo(medicineQuery.value).then(res=>{
    medicineinfoList.value=res.rows
  })
}

//获取入库详情记录
function getMedicineList(){
  listRecordinfo(queryInParm.value).then(res=>{

  })
}
//点击审核成功
const success=()=>{

  const wen=ref("审核通过")
  form.value.reviewStatus="审核通过"


  console.log(form.value)
  shenhe(form.value).then(res => {
    console.log(res)
    for (const a in reviewArr) {
      tj(a).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    }
  }).catch(fail=>{
    console.log(fail)
  })
  alert("审核成功")

}

//点击审核失败


onMounted(()=>{
  storageInId.value=route.query.storageInId

  getRecord(storageInId.value).then(res=>{
    console.log(res)
    storageInRecord.value=res.data
    form.value.storageInId=storageInRecord.value.storageInId
    form.value.orderDate=storageInRecord.value.orderDate
    form.value.medicineAdminOrder=storageInRecord.value.medicineAdminOrder
    console.log(form.value)
    console.log(storageInRecord.value)
  })

  listManufacturer(queryParams.value).then(res=>{
    console.log(res)
    changjia.value=res.rows
  })

  getList()





})

</script>

<template>



  <div class="root">



    <span style="font-size: 20px;line-height: 50px;font-weight: 60">编辑入库信息</span>
    <div class="content" style="display: inline-block">
      <el-button type="success" @click="success">审核通过</el-button>
      <el-button type="danger" @click="fail">审核不通过</el-button>
      <el-button type="info" @click="back">返回</el-button>
    </div>


    <div class="on">

      <el-form
          style="max-width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap"
          :model="form"
          label-width="auto"
          :label-position="labelPosition"
          :size="size"
      >
        <el-form-item label="入库单号" style="width:23%;">
          <el-input v-model="form.storageInId" />
        </el-form-item>
        <el-form-item label="入库日期" style="width:23%">
          <el-date-picker
              v-model="form.storageInDate"
              type="date"
              placeholder="选择入库日期"
              clearable
          />
        </el-form-item>
        <el-form-item label="入库人员" style="width:23%;">
          <el-select
              v-model="form.medicineAdmin"
              placeholder="选择入库人员"
          >
            <el-option label="东芝" value="东芝" />
            <el-option label="王菲" value="王菲" />
            <el-option label="蔡徐坤" value="蔡徐坤" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库类型" style="width:23%">
          <el-select
              v-model="form.storageInType"
              placeholder="选择入库类型"
          >
            <el-option label="采购入库" value="采购入库" />
            <el-option label="退货入库" value="退货入库" />
            <el-option label="其他入库" value="其他入库" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" style="width:23%">
          <el-select
              v-model="form.manufacturerId"
              placeholder="选择供应商"
          >
            <el-option v-for="(value,index) in changjia" :key="index" :label="value.manufacturerName
" :value="value.manufacturerId
" />
          </el-select>
        </el-form-item>
        <el-form-item label="制单日期" style="width:23%">
          <el-input v-model="form.orderDate" disabled/>
        </el-form-item>
        <el-form-item label="制单人员" style="width:23%">
          <el-input v-model="form.medicineAdminOrder" disabled/>
        </el-form-item>
        <el-form-item label="备注" style="width:23%">
          <el-input v-model="form.remarks" />
        </el-form-item>
      </el-form>


    </div>

    <div class="bottom">


      <el-table :data="reviewArr" style="width: 90%;margin: 0 auto">
        <el-table-column label="药品编码" align="center" prop="medicineId" />

        <el-table-column label="药品名称" align="center" prop="medicineName" />
        <el-table-column label="生产厂家" align="center" prop="manufacturerName" />
        <el-table-column label="数量" align="center" prop="ext1"  />
        <el-table-column label="采购价" align="center" prop="purchasePrice" />
        <el-table-column label="零售价" align="center" prop="retailPrice" />
        <el-table-column label="药品有效期" align="center" prop="validityPeriod" />
        <el-table-column label="采购金额" align="center" >
          <template #default="scope">
            {{scope.row.ext1*scope.row.purchasePrice}}
          </template>
        </el-table-column>
        <el-table-column label="售卖金额" align="center">
          <template #default="scope">
            {{scope.row.ext1*scope.row.retailPrice}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 20px auto;width: 120px">
        <el-button type="success" plain style="width: 120px;height: 50px" @click="tianjia">添加药品</el-button>
      </div>





    </div>

    <el-dialog  v-model="isOk" width="1300px" append-to-body>


      <el-form :model="query" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="处方类别" prop="medicineCategoryId">
          <el-select v-model="medicineQuery.prescriptionName" placeholder="请选择类别" clearable style="width: 200px">
            <el-option
                v-for="dict in medicine_ptype"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="药品状态" prop="medicineStatusId">
          <el-select v-model="medicineQuery.medicineStatusId" placeholder="请选择药品状态" clearable style="width: 200px">
            <el-option
                v-for="dict in medicine_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>


      <el-table  :data="medicineinfoList" @selection-change="handleSelectionChange" height="500px">
        <el-table-column type="selection" width="25" align="center" />
        <el-table-column label="编号" align="center" prop="medicineId" />
        <el-table-column label="名称" align="center" prop="medicineName" />
        <el-table-column label="规格" align="center" prop="medicineSpecification" width="120px"/>
        <el-table-column label="类别" align="center" prop="prescriptionName">
          <template #default="scope">
            <dict-tag :options="medicine_ptype" :value="scope.row.prescriptionName"/>
          </template>
        </el-table-column>
        <el-table-column label="生产厂家" align="center" prop="manufacturerName" width="180px"/>
        <el-table-column label="采购价" align="center" prop="purchasePrice" />
        <el-table-column label="售药价" align="center" prop="retailPrice" />
        <el-table-column label="数量" align="center" >
          <template #default="scope">
            <el-input-number
                v-model="scope.row.ext1"
                class="mx-4"
                :min="1"
                :max="100"
                controls-position="right"
                @change="handleChange"
            />
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>



  </div>








</template>

<style scoped>

.root{
  padding: 20px;
}
.content{
  float: right;
  margin-bottom: 60px;
}
.on{
  margin-bottom: 30px;
}
</style>